<template>
    <div class="page-container">
        <!-- 顶部标题区 -->
        <div class="container-header">
            <header-title title="碳分析管理" @refresh="" @export="" />
            <TimeTabs
                @change=""
                :tabs="tabs"
                :item-style="{
                    width: '25%',
                    textAlign: 'center',
                    backgroundColor: '#fff',
                    padding: '12px 0',
                }"
            ></TimeTabs>
        </div>
        <!--内容区-->
        <div class="main-content">
            <div class="content" style="background: #fff">
                <div class="section-header">
                    <h2>碳排统计</h2>
                    <div class="section-tabs">
                        <el-select v-model="queryParams.region" placeholder="年报表" class="max-wpx-9" style="margin-right: 12px">
                            <el-option label="年报表" value="shanghai"></el-option>
                        </el-select>
                        <el-button type="default" @click="handleExport">
                            导出
                            <svg-icon :icon-class="'export'" size="10"></svg-icon>
                        </el-button>
                    </div>
                </div>
                <el-form ref="queryFormRef" :inline="true" label-suffix="：" :model="queryParams" class="query-form" label-width="98px">
                    <el-form-item label="统计维度">
                        <el-select v-model="queryParams.region" placeholder="请选择" style="width: 100%">
                            <el-option label="日报表" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-radio-group>
                            <el-radio-button v-for="(item, index) in foreheadTabs" :label="item.label" :key="index">{{ item.label }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择日期">
                        <el-date-picker v-model="queryParams.value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="handleQuery" type="primary" class="search-icon">
                            <svg-icon icon-class="search-icon" />
                            搜索
                        </el-button>
                        <el-button @click="resetQuery" class="reset-icon">
                            <svg-icon icon-class="reset-icon" />
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
                <EnergyMetricsChart></EnergyMetricsChart>
            </div>
            <div class="content-center">
                <div class="content-center--left">
                    <div class="left-bottom">
                        <div class="section-header">
                            <h2>排名统计</h2>
                            <div class="time-tabs">
                                <TimeTabs :tabs="foreheadTabs" @change=""></TimeTabs>
                            </div>
                        </div>
                        <DistrictEnergyTable></DistrictEnergyTable>
                    </div>
                </div>
                <div class="content-center--right">
                    <div class="right-bottom">
                        <div class="section-header">
                            <h2>碳排放增长 趋势</h2>
                            <div class="section-tabs" style="display: flex">
                                <TimeTabs :tabs="foreheadTabs" @change="" style="margin-right: 12px"></TimeTabs>
                                <TimeTabs @change="" :tabs="compareTabs"></TimeTabs>
                            </div>
                        </div>
                        <div class="content-query">
                            <el-form ref="queryFormRef" :inline="true" label-suffix="：" :model="queryTable" class="query-form query-table" label-width="88px">
                                <el-form-item label="统计周期">
                                    <el-select v-model="queryTable.region" placeholder="小时" class="max-wpx-9">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="选择日期">
                                    <el-date-picker v-model="queryParams.value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                                    <el-checkbox v-model="queryParams.checked" style="margin-left: 20px">范围选择</el-checkbox>
                                </el-form-item>
                                <div>
                                    <el-form-item label="统计维度">
                                        <el-select v-model="queryTable.region" placeholder="请选择" class="max-wpx-14">
                                            <el-option label="区域一" value="shanghai"></el-option>
                                            <el-option label="区域二" value="beijing"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="统计对象">
                                        <el-input v-model="queryTable.name" class="max-wpx-21" placeholder="请输入区域/系统/设备名称"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button @click="handleQuery" type="primary" class="search-icon">
                                            <svg-icon icon-class="search-icon" />
                                            搜索
                                        </el-button>
                                        <el-button @click="resetQuery" class="reset-icon">
                                            <svg-icon icon-class="reset-icon" />
                                            重置
                                        </el-button>
                                    </el-form-item>
                                </div>
                            </el-form>
                        </div>
                        <StatisticsCards :cards="statisticsCards"></StatisticsCards>
                        <PowerConsumptionChart></PowerConsumptionChart>
                    </div>
                </div>
            </div>
            <div class="content-footer">
                <div class="section-header">
                    <h2>表格</h2>
                    <div class="section-tabs">
                        <el-button type="default" @click="handleExport">
                            导出
                            <svg-icon :icon-class="'export'" size="10"></svg-icon>
                        </el-button>
                    </div>
                </div>
                <div class="content-query" style="padding: 18px">
                    <el-form ref="queryFormRef" :inline="true" label-suffix="：" :model="queryTable" label-width="88px">
                        <div>
                            <el-form-item label="">
                                <el-radio-group>
                                    <el-radio-button v-for="(item, index) in foreheadTabs" :label="item.label" :key="index">{{ item.label }}</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="选择日期">
                                <el-date-picker v-model="queryParams.value1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="选择区域">
                                <el-select v-model="queryTable.region" placeholder="" class="max-wpx-14">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div>
                            <el-form-item label="统计维度">
                                <el-select v-model="queryTable.region" placeholder="请选择" class="max-wpx-14">
                                    <el-option label="区域一" value="shanghai"></el-option>
                                    <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="统计对象">
                                <el-input v-model="queryTable.name" class="max-wpx-21" placeholder="请输入区域/系统/设备名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="handleQuery" type="primary" class="search-icon">
                                    <svg-icon icon-class="search-icon" />
                                    搜索
                                </el-button>
                                <el-button @click="resetQuery" class="reset-icon">
                                    <svg-icon icon-class="reset-icon" />
                                    重置
                                </el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="content-table">
                    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ fontSize: '12px', backgroundColor: '#DFE6EC', color: '#606266', textAlign: 'center' }">
                        <el-table-column label="区域名称" align="center" prop="alertName" />
                        <el-table-column label="碳排放量 ( tCO2e)" align="center" prop="serialNumber" />
                        <el-table-column label="一次能源标准煤炭消耗 ( 吨 )" align="center" prop="serialNumber" />
                        <el-table-column label="二次能源标准煤炭消耗 ( 吨 )" align="center" prop="serialNumber" />
                    </el-table>

                    <div class="table-pagination">
                        <el-pagination
                            :current-page="pagination.currPage"
                            :page-size="pagination.pageSize"
                            :page-sizes="pagination.pageSizes"
                            :total="pagination.totalPage"
                            layout="total, sizes, prev, pager, next, jumper"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import TimeTabs from '@/components/TimeTabs/index.vue';
import HeaderTitle from '@/components/headerTitle/index.vue';
import StatisticsCards from '@/components/StatisticsCards/index.vue';
import DistrictEnergyTable from './components/DistrictEnergyTable.vue';
import EnergyMetricsChart from './components/EnergyMetricsChart.vue';
import PowerConsumptionChart from './components/PowerConsumptionChart.vue';

export default {
    components: {
        StatisticsCards,
        HeaderTitle,
        TimeTabs,
        DistrictEnergyTable,
        EnergyMetricsChart,
        PowerConsumptionChart,
    },
    data() {
        return {
            tabs: [
                { key: 'today', label: '区域' },
                { key: 'quarter', label: '部门' },
                { key: 'month', label: '设备' },
                { key: 'month', label: '系统' },
            ],
            queryParams: {},
            energyData: {
                comprehensiveList: [
                    {
                        label: '综合能耗',
                        value: '0',
                        unit: 'tce',
                        type: 'comprehensive',
                    },
                    {
                        label: '碳排放量',
                        value: '0',
                        unit: 'kg',
                        color: '#EEFFF0',
                        type: 'carbon',
                    },
                ],
                items: [
                    {
                        type: 'electricity',
                        label: '电',
                        value: '123.43',
                        unit: 'kWh',
                        color: '#F7BA2A',
                        icon: 'el-icon-lightning',
                    },
                    {
                        type: 'compressed_air',
                        label: '压缩空气',
                        value: '0',
                        unit: 'm³',
                        color: '#907CFF',
                        icon: 'el-icon-wind-power',
                    },
                    {
                        type: 'water',
                        label: '水',
                        value: '324.03',
                        unit: 'm³',
                        color: '#1EC7FF',
                        icon: 'el-icon-goblet',
                    },
                    {
                        type: 'gas',
                        label: '天然气',
                        value: '3123.43',
                        unit: 'm³',
                        color: '#52C41A',
                        icon: 'el-icon-smoking',
                    },
                    {
                        type: 'heat',
                        label: '热量',
                        value: '123.43',
                        unit: 'kJ',
                        color: '#FA541C',
                        icon: 'el-icon-hot-water',
                    },
                    {
                        type: 'cold',
                        label: '冷量',
                        value: '324.03',
                        unit: 'm³',
                        color: '#13C2C2',
                        icon: 'el-icon-ice-cream',
                    },
                ],
                indexList: [
                    {
                        type: 'hvac',
                        label: '空调能效',
                        value: '123.43',
                        unit: 'cop',
                        color: '#1EC7FF',
                        icon: 'el-icon-lightning',
                    },
                    {
                        type: 'per_capita',
                        label: '人均单位能耗',
                        value: '0',
                        unit: 'tce/人',
                        color: '#907CFF',
                        icon: 'el-icon-wind-power',
                    },
                ],
            },
            lineChart: null,
            rankTabs: [
                { key: 'today', label: '区域' },
                { key: 'today2', label: '部门' },
                { key: 'today3', label: '设备' },
            ],
            trendParams: {},
            foreheadTabs: [
                { key: 'today', label: '本日' },
                { key: 'today2', label: '本月' },
                { key: 'today3', label: '本年' },
            ],
            compareTabs: [
                { key: 'today', label: '同比' },
                { key: 'month', label: '环比' },
            ],
            iconTabs: [
                { key: 'today', svg: 'icons1' },
                { key: 'month', svg: 'icons2' },
                { key: 'year', svg: 'icons3' },
            ],
            queryTable: {},
            statisticsCards: [
                { color: '#1EC7FF', label: '总碳排放量', unit: 'tCO2e', value: 123.453 },
                { color: '#13C998', label: '去年同期碳排放量', unit: 'tCO2e', value: 123.453 },
                { color: '#907CFF', label: '同比增长率', unit: '%', value: 0 },
            ],
            tableData: [],
            pagination: {
                pageSize: 10,
                currPage: 1,
                totalPage: 0,
                pageSizes: [10, 20, 30],
            },
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initCharts();
        });
    },
    methods: {
        handleQuery() {},
        resetQuery() {},
        handleSizeChange() {},
        handleCurrentChange() {},
        handleResize() {
            if (this.lineChart) {
                this.lineChart.resize();
            }
        },
        initCharts() {
            setTimeout(() => {
                this.initLineChart();
                this.initPieChart();
                this.initBarChart();
            }, 500);

            window.addEventListener('resize', this.handleResize);
        },
        initLineChart() {
            this.lineChart = this.$echarts.init(this.$refs.lineChart);
            const option = {
                title: [
                    {
                        text: '综合能耗tce',
                        textStyle: {
                            color: '#606266',
                            fontSize: 12,
                            fontWeight: 'normal',
                        },
                        left: 10,
                        textAlign: 'left',
                    },
                    {
                        text: '碳排放量kg',
                        textStyle: {
                            color: '#606266',
                            fontSize: 12,
                            fontWeight: 'normal',
                        },
                        right: 10,
                    },
                ],
                legend: {
                    show: true,
                    right: '50%',
                    padding: [0, 0, 20, 0],
                    top: '5',
                    textStyle: {
                        color: '#606266',
                        fontSize: 12,
                    },
                    data: [
                        { name: '综合能耗', icon: this.$base64Icon, itemHeight: 2, itemWidth: 24 },
                        { name: '碳排放量', icon: this.$base64Icon, itemHeight: 2, itemWidth: 24 },
                    ],
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(255, 255, 255, 0.95)',
                    borderColor: '#E6EBF5',
                    borderWidth: 1,
                    textStyle: {
                        color: '#333',
                    },
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                },
                grid: {
                    left: '20px',
                    right: '20px',
                    bottom: '20px',
                    top: '36px',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '23:59'],
                    axisLabel: {
                        color: '#606266',
                        fontSize: 12,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#E6EBF5',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        type: 'value',
                        position: 'left',
                        axisLabel: {
                            color: '#606266',
                            fontSize: 12,
                            show: true,
                        },
                        splitLine: {
                            show: true,
                            color: '#DCDFE6',
                        },
                    },
                    {
                        type: 'value',
                        position: 'right',
                        axisLabel: {
                            color: '#606266',
                            fontSize: 12,
                            show: true,
                        },
                        splitLine: {
                            color: '#DCDFE6',
                            show: false, //右侧不显示刻度
                        },
                    },
                ],
                series: [
                    {
                        data: [0.6, 0.5, 0.55, 0.85, 0.7, 0.6, 0.5, 0.75, 0.8, 0.6, 0.7, 0.65, 0.6],
                        type: 'line',
                        name: '综合能耗',
                        color: '#1EC7FF',
                        yAxisIndex: 0, // 使用第一个 Y 轴（左侧）
                        smooth: false,
                        showSymbol: false,
                    },
                    {
                        data: [0.8, 0.58, 0.155, 0.85, 0.7, 1.6, 0.5, 0.75, 0.8, 0.6, 0.7, 0.65, 0.6],
                        type: 'line',
                        color: '#34D564',
                        name: '碳排放量',
                        smooth: false,
                        showSymbol: false,
                        yAxisIndex: 1,
                    },
                ],
            };
            this.lineChart.setOption(option);
        },
    },
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
